<template>
	<div class="b-cont">
		<div>
			<!-- 未收款 -->
			<sections
				class="b-cells" 
				title="预收款" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				type="save_nofinance"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="nofinanceList"
						stripe
						border
						:header-cell-style="{'background-color':'#f6faff'}"
						style="width: 100%">
						<el-table-column prop="nofinance_money" label="预收款金额" width="105"></el-table-column>
						<el-table-column prop="nofinance_detail" label="备注"></el-table-column>
						<el-table-column
							align="center"
							label="操作"
							 width="180">
								<template slot-scope="scope">
									<el-link 
										v-if="allAuth.contract.save_nofinance"
										type="primary"
										@click="handleAction({'type':'save_finance','data':scope.row})">新建收款</el-link>
									<el-link
										v-if="allAuth.contract.update_nofinance"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'update_nofinance','data':scope.row})">修改</el-link>
									<el-link
										v-if="allAuth.contract.del_nofinance"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'del_nofinance','data':scope.row})">删除</el-link>
								</template>
						</el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
			<!-- 回款 -->
			<sections
				class="b-cells" 
				title="已收款" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="false"
				type="save_received"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="financeList"
						stripe
						border
						show-summary
						:summary-method="getSummaries"
						:header-cell-style="{'background-color':'#f6faff'}"
						style="width: 100%">
						<el-table-column prop="f_money" label="收款金额" width="135"></el-table-column>
						<el-table-column prop="f_time" label="收款时间" width="100"></el-table-column>
						<el-table-column prop="f_payway" label="收款方式" width="100"></el-table-column>
						<el-table-column prop="f_detail" label="备注"></el-table-column>
						<el-table-column
							align="center"
							label="状态"
							 width="115">
								<template slot-scope="scope">
									<span v-if="scope.row.confirm_time == 0">
										<span class="status-mark" style="background-color: rgb(255, 153, 31);"></span>
										<span>待审核</span>
									</span>
									<span v-else>
										<span style="color: red;">{{scope.row.confirm_time| filterTimestampToFormatTime("YYYY-MM-DD")}}</span>
									</span>
								</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="操作">
								<template slot-scope="scope">
									<el-link
										v-if="allAuth.contract.confirm_finance && scope.row.confirm_time == 0"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'confirm_finance','data':scope.row})">审批</el-link>
									<el-link
										v-if="allAuth.contract.update_finance"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'update_finance','data':scope.row})">修改</el-link>
									<el-link
										v-if="allAuth.contract.del_finance"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'del_finance','data':scope.row})">删除</el-link>
								</template>
						</el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
			<!-- 发票 -->
			<sections
				class="b-cells" 
				title="发票" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				type="save_invoice"
				@save="handleAction">
				<flexbox
					:gutter="0" 
					wrap="wrap" 
					style="padding:10px 8px;margin-top:5px">
					<el-table
						:data="invoiceList"
						stripe
						border
						:header-cell-style="{'background-color':'#f6faff'}"
						style="width: 100%">
						<el-table-column prop="invoice_name" label="开票名称" width="125"></el-table-column>
						<el-table-column prop="invoice_date" label="开票时间" width="100"></el-table-column>
						<el-table-column prop="invoice_money" label="开票金额" width="100"></el-table-column>
						<el-table-column prop="invoice_number" label="发票号码" width="100"></el-table-column>
						<el-table-column prop="invoice_detail" label="备注" width="150"></el-table-column>
						<el-table-column label="附件" width="150">
							<template slot-scope="scope">
								<span
									v-for="(v,k) in scope.row.file_id"
									:key="k">
									<a :href="v.file_path" style="display: block;" target="_blank">{{v.name}}</a>
								</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="操作">
								<template slot-scope="scope">
									<el-link
										v-if="allAuth.contract.update_invoice"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'update_invoice','data':scope.row})">修改</el-link>
									<el-link
										v-if="allAuth.contract.del_invoice"
										style="margin-left: 9px;"
										type="primary"
										@click="handleAction({'type':'del_invoice','data':scope.row})">删除</el-link>
								</template>
						</el-table-column>
					</el-table>
				</flexbox>
			</sections>
			
			
			
		</div>
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
		
		
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Sections from '../../customer/Sections'
	import DialogForm from '@/components/FromData/dialogForm'
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	import {
		crmContractFinancelist,
		crmContractNoFinanceSave,
		crmContractNoFinanceUpdate,
		crmContractNoFinanceDel,
		crmContractFinanceSave,
		crmContractFinanceDel,
		crmContractFinanceUpdate,
		crmContractFinanceConfirm,
		crmContractInvoiceSave,
		crmContractInvoiceUpdate,
		crmContractInvoiceDel,
		crmContractReturnSave,
		crmContractReturnUpdate,
		crmContractReturnDel
	} from '@/api/contract/contract'
	export default {
		components: {
			Sections,
			DialogForm,
			CrmRelativeCell
		},
		data() {
			return {
				financeList:[],
				nofinanceList:[],
				invoiceList:[],
				returnList:[],
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				action:{ type: '',relevant:'' },
				formData:{},
				
				
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
				zhaiwuSelectID:0,
			}
		},
		props: {
			/** 模块ID */
			id: [String, Number],
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			},
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch: {
			id: function(val) {
				this.getInfo()
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		mounted() {
			this.$bus.$on("refresh-detail",()=>{
			   this.getInfo()
			})
			this.getInfo()
		},
		methods: {
			// 获取基础信息
			getInfo() {
				crmContractFinancelist({
						contract_id: this.id
					})
					.then(res => {
						if(res.data){
							this.financeList = JSON.parse(JSON.stringify(res.data.finance))
							this.nofinanceList = JSON.parse(JSON.stringify(res.data.nofinance))
							this.invoiceList = JSON.parse(JSON.stringify(res.data.invoice))
						}else{
							this.financeList = []
							this.nofinanceList = []
							this.invoiceList = []
							this.returnList = []
						}
					})
					.catch(() => {})
			},
			
			// 表格合计
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
					const values = data.map(item => Number(item[column.property]));
					if (index === 0) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 元';
						sums[index] = "总计："+sums[index];
					} else {
						sums[index] = '';
					}
				});
			
				return sums;
			},
			
			// 添加信息
			handleAction(item){
				let items = {}
				switch (item.type){
					case "save_nofinance":
						this.title = "新增预收款"
						this.action = { type: 'save',relevant:'nofinance',actiontype:14 }
						this.dialogForm = true
						break;
						
					case "update_nofinance":
						this.title = "修改预收款"
						this.action = { type: 'update',relevant:'nofinance',actiontype:14 }
						items = JSON.parse(JSON.stringify(item.data))
						this.formData = items
						this.dialogForm = true
						break;
						
					case "del_nofinance":
						this.delInfo({"type":item.type,"data":item.data})
						break;
						
					case "save_finance":
						this.title = "新增收款"
						this.action = { type: 'save',relevant:'finance',actiontype:13 }
						items = JSON.parse(JSON.stringify(item.data))
						items["f_money"] = items["nofinance_money"]
						this.formData = items
						this.dialogForm = true
						break;
						
					case "update_finance":
						this.title = "修改收款"
						this.dialogForm = true
						this.action = { type: 'update',relevant:'finance',actiontype:13 }
						items = JSON.parse(JSON.stringify(item.data))
						this.formData = {
							"id" : items["id"],
							"f_money" : items["f_money"],
							"f_time" : items["f_time"],
							"f_payway" : items["f_payway"],
							"f_detail" : items["f_detail"]
						}
						break;
						
					case "del_finance":
						this.delInfo({"type":item.type,"data":item.data})
						break;
						
					case "confirm_finance":
						this.title = "审批收款"
						this.action = { type: 'update',relevant:'confirmfinance',actiontype:15 }
						this.formData["id"] = item.data.id
						this.dialogForm = true
						break;
						
					case "save_invoice":
						this.title = "新增发票"
						this.action = { type: 'save',relevant:'invoice',actiontype:16 }
						this.dialogForm = true
						break;
						
					case "update_invoice":
						this.title = "修改发票"
						items = JSON.parse(JSON.stringify(item.data))
						this.formData = items
						this.action = { type: 'update',relevant:'invoice' ,actiontype:16}
						
						this.dialogForm = true
						break;
						
					case "del_invoice":
						this.delInfo({"type":item.type,"data":item.data})
						break;
						
				}
			},
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.relationInfo.value = []
				this.formData = {}
			},
			saveDialog(item){
				let data = item.data
				data["contract_id"] = this.id
				let request
				if(item.type == "save_nofinance"){
					data["customer_id"] = this.detail.customer_id
					request = crmContractNoFinanceSave
				}else if(item.type == "update_nofinance"){
					request = crmContractNoFinanceUpdate
				}else if(item.type == "save_finance"){
					data["customer_id"] = this.detail.customer_id
					request = crmContractFinanceSave
				}else if(item.type == "update_finance"){
					request = crmContractFinanceUpdate
				}else if(item.type == "update_confirmfinance"){
					request = crmContractFinanceConfirm
				}else if(item.type == "save_invoice"){
					data["customer_id"] = this.detail.customer_id
					request = crmContractInvoiceSave
				}else if(item.type == "update_invoice"){
					request = crmContractInvoiceUpdate
				}
				
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.getInfo()
					})
			},
			delInfo(item){
				let request
				if(item.type == "del_nofinance"){
					request = crmContractNoFinanceDel
				}else if(item.type == "del_finance"){
					request = crmContractFinanceDel
				}else if(item.type == "del_invoice"){
					request = crmContractInvoiceDel
				}
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					request({
						id: item.data.id
					})
					.then(res => {
						this.$message.success(res.data)
						this.getInfo()
					})
					.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
			},
			
			// 关联债务
			fieldValueChange(data) {
				if(!data.value.length) return this.zhaiwuSelectID = 0
				this.zhaiwuSelectID = data.value[0].id
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.b-cont {
		position: relative;
		padding: 0 50px 20px 20px;
	}

	.b-cells {
		margin-top: 25px;
	}

	.b-cell {
		padding: 0 10px;

		.b-cell-b {
			width: auto;
			padding: 8px;

			.b-cell-name {
				width: 100px;
				margin-right: 10px;
				font-size: 13px;
				flex-shrink: 0;
				color: #777;
			}

			.b-cell-value {
				font-size: 13px;
				color: #333;
				white-space: pre-wrap;
				word-wrap: break-word;
			}

			.b-cell-foot {
				flex-shrink: 0;
				display: block;
				width: 15px;
				height: 15px;
				margin-left: 8px;
			}
		}
	}

	.f-item {
		padding: 3px 0;
		height: 25px;

		.f-img {
			position: block;
			width: 15px;
			height: 15px;
			padding: 0 1px;
			margin-right: 8px;
		}

		.f-name {
			color: #666;
			font-size: 12px;
			margin-right: 10px;
		}
	}
	.table{
		width: 100%;
		font-size: 13px !important;
	}
	
	.table td {
		vertical-align: middle;
		padding: 15px 10px;
		line-height: 20px;
		border: 1px solid #EEEEEE;
	}
	.table td.tdleft {
		text-align: center;
		background: #f6faff;
	}
	.table tr:hover {
		background: #f6faff;
	}
	.status-mark{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		margin-right: 2px;
	}
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		min-height: 40px !important;
		line-height: 40px !important;
		padding: 0 15px !important;
	}
</style>
